<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="chat.css" type="text/css">
    <style type="text/css" media="screen">
        @import url(../styles/sorttable.css);
        @import url(../styles/type-settings.css);
        @import url(../styles/site.css);
        @import url(../styles/prettify.css);
    </style>
    <title>Chat Example Using MQTT Over WebSocket</title>
    <link rel="stylesheet" type="text/css" href="chat.css"></link>
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script src='mqttws31.js'></script>
    <script src='chat.js'></script>
    <script>
        $(document).ready(function() {
        var supported = ("WebSocket" in window);
        if(!supported) {
        var msg = "Your browser does not support Web Sockets. This example will not work properly.<br>";
        msg += "Please use a Web Browser with Web Sockets support (WebKit or Google Chrome).";
        $("#connect").html(msg);
        }
        });
    </script>
</head>
<body>

<div class="white_box">
    <div class="header">
        <div class="header_l">
            <div class="header_r">
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content_l">
            <div class="content_r">

                <div>

                    <!-- Banner -->
                    <div id="asf_logo">
                        <div id="activemq_logo">
                            <a style="float:left; width:280px;display:block;text-indent:-5000px;text-decoration:none;line-height:60px; margin-top:10px; margin-left:100px;"
                               href="http://activemq.apache.org/"
                               title="The most popular and powerful open source Message Broker">ActiveMQ</a>
                            <a style="float:right; width:210px;display:block;text-indent:-5000px;text-decoration:none;line-height:60px; margin-top:15px; margin-right:10px;"
                               href="http://www.apache.org/" title="The Apache Software Foundation">ASF</a>
                        </div>
                    </div>


                    <div class="top_red_bar">
                        <div id="site-breadcrumbs">
                            <a href="../index.html" title="Home">Home</a>
                        </div>
                        <div id="site-quicklinks"><P>
                            <a href="http://activemq.apache.org/support.html"
                               title="Get help and support using Apache ActiveMQ">Support</a></p>
                        </div>
                    </div>

                    <table border="0">
                        <tbody>
                        <tr>
                            <td valign="top" width="100%" style="overflow:hidden;">
                                <div class="body-content">

<div id='connect'>
    <form id='connect_form'>
        <dl>
            <dt><label for=connect_url>Server Host</label></dt>
            <dd><input name=url id='connect_host' value='localhost'></dd>
            <dt><label for=connect_port>Server Port</label></dt>
            <dd><input id='connect_port' placeholder="Server Port" value="61614"></dd>
            <dt><label for=connect_clientId>Client ID</label></dt>
            <dd><input id='connect_clientId' placeholder="Client ID" value="clientId"></dd>
            <dt><label for=destination>Destination</label></dt>
            <dd><input id='destination' placeholder="Destination" value="/test"></dd>
            <dt>&nbsp;</dt>
            <dd><input type=submit id='connect_submit' value="Connect"></dd>
        </dl>
    </form>

    <p><b>Make sure you have enabled <a href="http://activemq.apache.org/websockets.html">websockets transport</a> before running this demo</b></p>
    <p>This demo uses <a href="http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/">Eclipse Paho MQTT JavaScript library</a></p>
    <p>Use the form above to connect to the MQTT server and subscribe to the destination.</p>
    <p>Once connected, you can send messages to the destination with the text field at the bottom of this page</p>


</div>
<div id="disconnect">
    <form id='disconnect_form'>
        <input type=submit id='disconnect_submit' value="Disconnect">
    </form>
</div>
<div id="messages">
</div>

<form id='send_form'>
    <input id='send_form_input' placeholder="Type your message here" disabled />
</form>

<pre id="debug"></pre>

                                </div>
                            </td>
                            <td valign="top">

                                <div class="navigation">
                                    <div class="navigation_top">
                                        <div class="navigation_bottom">
                                            <H3>Useful Links</H3>

                                            <ul class="alternate" type="square">
                                                <li><a href="http://activemq.apache.org/"
                                                       title="The most popular and powerful open source Message Broker">Documentation</a></li>
                                                <li><a href="http://activemq.apache.org/faq.html">FAQ</a></li>
                                                <li><a href="http://activemq.apache.org/download.html">Downloads</a>
                                                </li>
                                                <li><a href="http://activemq.apache.org/discussion-forums.html">Forums</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>


                    <div class="bottom_red_bar"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="black_box">
        <div class="footer">
            <div class="footer_l">
                <div class="footer_r">
                    <div>
                        Copyright 2005-2020 The Apache Software Foundation.

                        (<a href="?printable=true">printable version</a>)
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="design_attribution"><a href="http://hiramchirino.com/">Graphic Design By Hiram</a></div>

</body>
</html>
